﻿<div class="bg-light lter b-b wrapper-md">
  <h1 class="m-n font-thin h3">门户组件 <kbd class="pull-right">Portlet</kbd></h1>
</div>
<div class="wrapper-md">
  <div class="row">
    <div class="col-sm-6 connected" ui-jq="sortable" ui-options="{items:'.panel', handle:'.panel-heading', connectWith:'.connected'}">
      <div class="panel panel-info">
        <div class="panel-heading">
          快速访问
        </div>
        <div class="list-group bg-white">
          <a href class="list-group-item">
            <i class="fa fa-fw fa-envelope"></i> 收件箱
          </a>
          <a href class="list-group-item">
            <i class="fa fa-fw fa-eye"></i> 访问量
          </a>
          <a href class="list-group-item">
            <i class="fa fa-fw fa-phone"></i> 来电
          </a>
          <a href class="list-group-item">
            <i class="fa fa-fw fa-comments-o"></i> 消息
          </a>
          <a href class="list-group-item">
            <i class="fa fa-fw fa-bookmark"></i> 书签
          </a>
          <a href class="list-group-item">
            <i class="fa fa-fw fa-bell"></i> 通知
          </a>
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading">
          新闻 <span class="badge">32</span>                    
        </div>
        <div class="panel-body">
          <article class="media">
            <div class="pull-left">
              <span class="fa-stack fa-lg">
                <i class="fa fa-circle fa-stack-2x"></i>
                <i class="fa fa-bold fa-stack-1x text-white"></i>
              </span>
            </div>
            <div class="media-body">                        
              <a href class="h4">Bootstrap 3: 你需要知道什么</a>
              <small class="block m-t-xs">灵活、直观和强大的移动端优先的，更快和更简单的Web前端开发框架。</small>
              <em class="text-xs">发表于 <span class="text-danger">2013/02/23</span></em>
            </div>
          </article>
          <div class="line pull-in"></div>
          <article class="media">
            <div class="pull-left">
              <span class="fa-stack fa-lg">
                <i class="fa fa-circle fa-stack-2x text-info"></i>
                <i class="fa fa-file-o fa-stack-1x text-white"></i>
              </span>
            </div>
            <div class="media-body">
              <a href class="h4">Bootstrap 帮助文档</a>
              <small class="block m-t-xs">这里有几种简单的方法可以很快地开始 Bootstrap，每一种方法都有着不同的技能水平要求和应用场景，看看有没有适合您的方式。</small>
              <em class="text-xs">发表于 <span class="text-danger">2013/02/12</span></em>
            </div>
          </article>
          <div class="line pull-in"></div>
          <article class="media">
            <div class="pull-left">
              <span class="fa-stack fa-lg">
                <i class="fa fa-circle fa-stack-2x"></i>
                <i class="fa fa-mobile fa-stack-1x text-white"></i>
              </span>
            </div>
            <div class="media-body">
              <a href class="h4 text-success">移动端优先的 html/css 框架</a>
              <small class="block m-t-xs">有 Bootstrap, Ratchet 等...</small>
              <em class="text-xs">发表于 <span class="text-danger">2013/02/05</span></em>
            </div>
          </article>
        </div>
      </div>
    </div>
    <div class="col-sm-6 connected" ui-jq="sortable" ui-options="{items:'.panel', handle:'.panel-heading', connectWith:'.connected'}">
      <div class="panel panel-success">
        <div class="panel-heading">
          互动
        </div>
        <ul class="list-group alt">
          <li class="list-group-item">
            <div class="media">
              <span class="pull-left thumb-sm"><img src="img/a1.jpg" alt="..." class="img-circle"></span>
              <div class="pull-right text-success m-t-sm">
                <i class="fa fa-circle"></i>
              </div>
              <div class="media-body">
                <div><a href>熊大</a></div>
                <small class="text-muted">于 2 分钟前</small>
              </div>
            </div>
          </li>
          <li class="list-group-item">
            <div class="media">
              <span class="pull-left thumb-sm"><img src="img/a2.jpg" alt="..." class="img-circle"></span>
              <div class="pull-right text-muted m-t-sm">
                <i class="fa fa-circle"></i>
              </div>
              <div class="media-body">
                <div><a href>熊二</a></div>
                <small class="text-muted">于 2 小时前</small>
              </div>
            </div>
          </li>
          <li class="list-group-item">
            <div class="media">
              <span class="pull-left thumb-sm"><img src="img/a3.jpg" alt="..." class="img-circle"></span>
              <div class="pull-right text-warning m-t-sm">
                <i class="fa fa-circle"></i>
              </div>
              <div class="media-body">
                <div><a href>光头强</a></div>
                <small class="text-muted">于 3 天前</small>
              </div>
            </div>
          </li>
          <li class="list-group-item">
            <div class="media">
              <span class="pull-left thumb-sm"><img src="img/a4.jpg" alt="..." class="img-circle"></span>
              <div class="pull-right text-danger m-t-sm">
                <i class="fa fa-circle"></i>
              </div>
              <div class="media-body">
                <div><a href>吉吉国王</a></div>
                <small class="text-muted">于 2 分钟前</small>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading">                    
          <span class="label bg-dark">15</span> 收件箱
        </div>
        <div class="panel-body">
          <article class="media">
            <span class="pull-left thumb-sm"><img src="img/a1.jpg" alt="..." class="img-circle"></span>
            <div class="media-body">
              <div class="pull-right text-center text-muted">
                <strong class="h4">12:18</strong><br>
                <small class="label bg-light">pm</small>
              </div>
              <a href class="h4">微信 v1.0 正式版</a>
              <small class="block"><a href class="">张小龙</a> <span class="label label-success">微信之父</span></small>
              <small class="block m-t-sm">微信 v1.0 正式版已经发布了，快来点来聊骚。</small>
            </div>
          </article>
          <div class="line pull-in"></div>
          <article class="media">
            <span class="pull-left thumb-sm"><i class="fa fa-file-o fa-3x"></i></span>                
            <div class="media-body">
              <div class="pull-right text-center text-muted">
                <strong class="h4">17</strong><br>
                <small class="label bg-light">二月</small>
              </div>
              <a href class="h4">京东开放平台 API 文档</a>
              <small class="block"><a href class="">刘强东</a> <span class="label label-info">不知妻美</span></small>
              <small class="block m-t-sm">JOS=Jingdong Open Service，是京东开放服务的简称。通过JOS，可以打通卖家信息系统和京东的营销系统、供应链系统、物流系统、服务系统，实现卖家信息系统和京东信息系统的无缝对接。</small>
            </div>
          </article>
          <div class="line pull-in"></div>
          <article class="media">
            <div class="media-body">
              <div class="pull-right text-center text-muted">
                <strong class="h4">09</strong><br>
                <small class="label bg-light">一月</small>
              </div>
              <a href class="h4 text-success">移动端优先的 html/css 框架</a>
              <small class="block m-t-sm">有 Bootstrap, Ratchet 等...</small>
            </div>
          </article>
        </div>
      </div>    
    </div>
  </div>
</div>